<template>
  <div class="page">
    <div v-if="pageFlag">
      <ul class="header">
        <li
          v-for="(item, index) in wareData"
          :key="index"
          :style="
            item.isStyle && item.isDisable == '0'
              ? 'background-color: #3eae7c;color:#fff;'
              : item.isStyle && item.isDisable == '1'
              ? 'background-color: #aaaaaa;color:#fff;'
              : ''
          "
          :class="item.isDisable == '1' ? 'disable' : ''"
          class="ware-item"
          @click="activeItem(item)"
        >
          {{ item.storeHouseCode }}
        </li>
      </ul>
      <a-tabs :activeKey="activeKey" @change="callBack">
        <a-tab-pane key="1" tab="仓库价格方案">
          <a-spin tip="Loading..." :spinning="spinning">
            <WarehouseTable @goClient="goClient" :tableData="tableData" />
          </a-spin>
        </a-tab-pane>
        <a-tab-pane key="2" tab="客户价格方案">
          <WarehouseTable @goClient="goClient" :tableData="tableData" />
        </a-tab-pane>
      </a-tabs>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            :current="searchData.current"
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              (props) =>
                ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </div>
    <ClientModal
      :clientData="clientData"
      @backHome="backHome"
      :type="activeKey"
      v-else
    />
  </div>
</template>

<script>
import WarehouseTable from "@/components/system/marketing/warehouseData/WarehouseTable";
import ClientModal from "@/components/system/marketing/warehouseData/ClientModal";
import {
  warehouseData_tabList,
  warehouseData_wareCount,
  warehouseData_clientCount,
} from "@/apis/system/marketing/warehouseData";
export default {
  components: {
    WarehouseTable,
    ClientModal,
  },
  mounted() {
    this.getWarehouse();
  },
  data() {
    return {
      clientData: {},
      pageFlag: true,
      tableData: [],
      activeKey: "1",
      total: 0,
      searchData: {
        size: 10,
        current: 1,
      },
      sysStoreHouseId: null,
      revenuePlan: null,
      sysChargingSchemeId: null,
      spinning: false,
      storeHouseCode: null,
      wareData: [],
    };
  },
  methods: {
    backHome() {
      // this.getTableList(this.sysStoreHouseId, this.revenuePlan);
      this.pageFlag = true;
    },
    //监听子组件得方法
    async goClient(row) {
      this.clientData = JSON.parse(JSON.stringify(row));
      this.$set(this.clientData, "sysStoreHouseId", this.sysStoreHouseId);
      this.$set(this.clientData, "storeHouseCode", this.storeHouseCode);
      this.$set(this.clientData, "sysChargingSchemeId", this.revenuePlan);
      this.$set(this.clientData, "schemeId", row.sysChargingSchemeId);
      console.log(this.clientData);
      this.pageFlag = false;
    },
    //切换tab栏
    callBack(activeKey) {
      this.activeKey = activeKey;
      this.getTableList(this.sysStoreHouseId, this.revenuePlan);
    },
    //切换仓库的方法
    activeItem(row) {
      //先把所有的激活状态去掉
      this.wareData.forEach(async (item) => {
        item.isStyle = false;
        //再找到点击的那个加上激活
        if (item.sysStoreHouseId == row.sysStoreHouseId) {
          this.sysChargingSchemeId = item.sysChargingSchemeId;
          this.sysStoreHouseId = item.sysStoreHouseId;
          this.storeHouseCode = item.storeHouseCode;
          this.revenuePlan = item.revenuePlan;
          this.getTableList(item.sysStoreHouseId, item.revenuePlan);
          item.isStyle = true;
        }
      });
    },
    //获取仓库的方法
    async getWarehouse() {
      let res = await warehouseData_tabList();
      if (res.code == "200") {
        this.wareData = res.responseBody;
      }
      if (this.wareData.length != 0) {
        this.wareData.forEach(async (item) => {
          this.$set(item, "isStyle", false);
        });
        this.wareData[0].isStyle = true;
        this.revenuePlan = this.wareData[0].revenuePlan;
        this.sysStoreHouseId = this.wareData[0].sysStoreHouseId;
        this.storeHouseCode = this.wareData[0].storeHouseCode;
        this.sysChargingSchemeId = this.wareData[0].sysChargingSchemeId;
        this.getTableList(
          this.wareData[0].sysStoreHouseId,
          this.wareData[0].revenuePlan
        );
      }
    },
    //获取表格数据
    async getTableList(id, plan) {
      this.spinning = true;
      if (this.activeKey == "1") {
        let res = await warehouseData_wareCount(id, {
          sysChargingSchemeId: plan,
        });
        if (res.code == "200") {
          this.tableData = res.responseBody.records;
          this.total = res.responseBody.total * 1;
          if (this.tableData && this.tableData.length > 0) {
            this.$set(this.tableData[0], "defualt", true);
          }
          this.spinning = false;
        }
      } else {
        let res = await warehouseData_clientCount(id, {
          sysChargingSchemeId: plan,
        });
        if (res.code == "200") {
          this.tableData = res.responseBody.records;
          this.total = res.responseBody.total * 1;
          this.spinning = false;
        }
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTableList(this.sysStoreHouseId, this.revenuePlan);
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTableList(this.sysStoreHouseId, this.revenuePlan);
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  margin-right: 20px;
}
.header {
  background-color: #f2f2f2;
  padding: 10px 5px;
  display: flex;
  flex-wrap: wrap;
  font-size: 18px;
  list-style: none;
  .ware-item {
    cursor: pointer;
    margin: 0 6px 5px 0;
    padding: 0 15px;
    border-radius: 10px;
  }
}
.disable {
  color: #aaaab1;
}
</style>